{% extends "base.html" %}
{% load extended_filter %}

{% block content %}
    <div class="row">
        <div class="span12">
            <ul class="breadcrumb">
                <li>
                    <a href="/monitor/service/{{ task.job.cluster.service.id }}">{{ task.job.cluster.service.name }}</a> <span
                        class="divider">/</span>
                </li>
                <li>
                    <a href="/monitor/cluster/{{ task.job.cluster.id }}">{{ task.job.cluster.name }}</a> <span
                        class="divider">/</span>
                </li>
                <li>
                    <a href="/monitor/job/{{ task.job.id }}">{{ task.job.name }}</a> <span
                        class="divider">/</span>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"> {{ task.host }}:{{ task.port }}
                        <b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-left">
                        {% for task in tasks %}
                            <li>
                                <a href="/monitor/task/{{ task.id }}/{{ chart_group.name }}">{{ task.host }}:{{ task.port }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
                <li class="active"></li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div id="sidebar" class="span1">
            <ul class="nav nav-list affix">
                {% for view_tag, graph in tsdb_metrics%}
                <li><a href=#{{view_tag}}>{{view_tag}}</a></li>
                {% endfor %}
            </ul>
        </div>

        <div class="span11">
            {% for view_tag, graphs in tsdb_metrics%}
            <section id="{{view_tag}}">
            <div class="row">
            {% for graph in graphs %}
                <div class="span5">
                    <center>{{graph.title}}</center>
                    <a href="{{tsdb_url_prefix}}/#start={{start_date}}{{ graph.query }}&yrange=[0:]&key=out%20center%20top&wxh={{12|pic_width}}x{{graph.query|pic_heigth}}" >
                        <img src="{{tsdb_url_prefix}}/q?start={{start_date}}{{ graph.query }}&yrange=[0:]&key=out%20center%20top&wxh={{6|pic_width}}x{{graph.query|pic_heigth}}&png" />
                    </a>
                </div>
                {% if forloop.counter|divisibleby:2 %}
            </div>
            <div class="row">
                {% endif %}
            {% endfor %}
            </section>
            {% endfor %}
        </div>
    </div>

{% endblock %}
